<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://cdn.polyfill.io/v1/polyfill.js?features=CustomEvents,Element.prototype.closest"></script>
  <link rel="stylesheet" href="slider.css">
  <script src="slider.js"></script>
</head>

<body>
  <div id="slider" class="slider">
    <div class="thumb"></div>
  </div>


  Slide:<span id="slide">&nbsp;</span> Change:
  <span id="change">&nbsp;</span>

  <button onclick="slider.setValue(50)">slider.setValue(50)</button>

  <script>
    var sliderElem = document.getElementById('slider');

    var slider = new Slider({
      elem: sliderElem,
      max: 100
    });

    sliderElem.addEventListener('slide', function(event) {
      document.getElementById('slide').innerHTML = event.detail;
    });

    sliderElem.addEventListener('change', function(event) {
      document.getElementById('change').innerHTML = event.detail;
    });
  </script>


</body>

</html>